<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="图片地址">
        <el-input v-model="form.spotImg" placeholder="请填写图片地址"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即新增</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import scenic from '@/api/travel/scenic/scenic'

export default {
    
  data() {
    return {
      form: {
          spotId:0,
          spotImg:''
      },
    };
  },
  create() {
  },
  beforeRouteEnter(to, from, next) {
    // console.log(this, 'beforeRouteEnter'); // undefined
    // console.log(to, '组件独享守卫beforeRouteEnter第一个参数');
    // console.log(from, '组件独享守卫beforeRouteEnter第二个参数');
    // console.log(next, '组件独享守卫beforeRouteEnter第三个参数');
    next((vm) => {
      //因为当钩子执行前，组件实例还没被创建
      // vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
      console.log(vm); //当前组件的实例
      vm.init();
    });
  },
  methods: {
    //初始化
    init(){
        //判断路径是否有id值
        if(this.$route.params && this.$route.params.id){
            this.form.spotId = this.$route.params.id
        }
    },
    onSubmit() {
      console.log("submit!");
        console.log(this.form)
      scenic.addScenicSpotImg(this.form).then(response =>{
        //提示成功
        this.$message({
                type: 'success',
                message: '增加景点图片成功!'
        });
        //跳转回首页
        this.$router.push({path:'/scenic/info/'+ this.form.spotId})
      })
    },
  },
};
</script>